<template>
  <div class="order">
    <div style="height: 0;flex-grow: 1;overflow-y: scroll">
      <div class="orderpic" :style="{ overflow: 'hidden', background: 'url('+JSON.parse(carinfo.imgs)[0].url+') center center' , backgroundSize: 'cover'}" >
        <div class="backbtn" @click="$router.go(-1)">返回</div>
      </div>
      <div class="carname">
       {{carinfo.name}}
      </div>

      <!--基本参数-->
      <div class="infotitle">费用明细</div>
      <div class="feedetail">
        <div class="lineAll clearfix">
          <span class="fl">总计</span>
          <span class="fr tot" >{{total_fee}}元</span>
        </div>
        <div class="lineItem clearfix" >
          <div class="fl" v-if="$store.state.order.counttype==='4hour'">按4小时计费<span>{{carinfo.fourfee.fee}}/4小时</span></div>
          <div class="fl" v-if="$store.state.order.counttype==='8hour'">按8小时计费<span>{{carinfo.eightfee.fee}}/8小时</span></div>
          <div class="fl" v-if="$store.state.order.counttype==='day'">按天<span>{{carinfo.dayfee.fee}}/天</span></div>
          <div class="fr">
              {{fee}}元
            <span> {{countDatestr}} </span>
          </div>
        </div>

        <div class="lineItem clearfix" v-if="$store.state.order.need_driver===1">
          <div class="fl" v-if="$store.state.order.counttype==='4hour'">代驾费<span>{{carinfo.fourfee.driver_fee}}元/4小时</span></div>
          <div class="fl" v-if="$store.state.order.counttype==='8hour'">代驾费<span>{{carinfo.eightfee.driver_fee}}元/8小时</span></div>
          <div class="fl" v-if="$store.state.order.counttype==='day'">代驾费<span>{{carinfo.dayfee.driver_fee}}元/天</span></div>
          <div class="fr">
            {{driver_fee}}
            <span> {{countDatestr}} </span>
          </div>
        </div>
  <!--      <div class="lineItem clearfix" >
          <div class="fl">服务费<span></span></div>
          <div class="fr">{{service_fee}}元<span></span></div>
        </div>-->

<!--        <div class="lineItem clearfix">
          <div class="fl">保险费用
            <span> {{$store.state.feetander.insurance_fee}}/天 </span>
          </div>
          <div class="fr">{{insurance_fee}}元
            <span>{{countDatestr}}</span>
          </div>
        </div>-->

        <div class="lineItem clearfix" v-if="$store.state.order.gettype">
          <div class="fl">上门服务费
            <span> {{50}}/市区范围</span>
          </div>
          <div class="fr">{{sm_fee}}元
            <span></span>
          </div>
        </div>

        <div class="lineItem clearfix" >
          <div class="fl">保证金<span></span>
          </div>
          <div class="fr">{{carinfo.despoil}}元<span>取车时支付</span></div>
        </div>

      </div>

      <!--订单联系方式-->
      <div class="infotitle">订车人联系方式</div>
      <div style="padding: 0 40px 20px">
        <md-field>
          <md-input-item
            ref="orderpeople"
            title="联系人"
            v-model="lxname"
            placeholder="请填写您的姓名"
            :maxlength="10"
          ></md-input-item>
          <md-input-item
            title="手机号"
            type="phone"
            v-model="phone"
            placeholder="填写您的11位手机号码"
          ></md-input-item>

        </md-field>
      </div>

      <div class="infotitle" v-if="$store.state.order.address">取车地址</div>
      <div style="padding: 0 40px 20px;color:#666;text-align: center;line-height: 2;">
        <div style="font-size: 14px;"> {{$store.state.order.address}}</div>
      </div>

      <!--订单用车时间-->
      <div class="infotitle">用车时间</div>
      <div style="padding: 0 40px 20px;color:#666;text-align: center;line-height: 2;">
        <div style="font-size: 14px;"> <span style="color:#333">取车时间</span> {{$store.state.order.sdate|moment('YYYY-MM-DD hh:mm')}} </div>
        <div style="font-size: 14px;"> <span style="color:#333">还车时间</span> {{$store.state.order.edate|moment('YYYY-MM-DD hh:mm')}}  </div>
      </div>

      <!-- 联系客服 -->
      <div class="infotitle">联系客服</div>

      <div class="custom"> 18174123678 </div>

    </div>
    <div class="checkout"  @click="isCashierhow=true">立即支付  {{parseInt(this.total_fee)}} 元 </div>

    <md-cashier
      ref="cashier"
      v-model="isCashierhow"
      :channels="cashierChannels"
      :payment-amount="String(total_fee)"
      :payment-describe="'可用余额:'+$store.state.wxuser.balance"
      @select="onCashierSelect"
      @pay="onCashierPay"
      @cancel="isCashierhow=false"
    ></md-cashier>
  </div>
</template>

<script>
import { Toast } from 'mand-mobile'
export default {
  name: 'Pay',
  data () {
    return {
      isCashierhow: false,
      countDatestr: '',
      orderpeople: '',
      phone: '',
      lxname: '',
      carinfo: {},
      gettype: '1',
      getdj: '2',
      counttype: '3',
      total: 0,
      driver_fee: 0.00,
      service_fee: 0.00,
      fee: 0.00,
      send_fee: 0.00,
      sm_fee: 0.00,
      imgs: [
        'https://fakeimg.pl/375x300/',
        'https://fakeimg.pl/375x300/',
        'https://fakeimg.pl/375x300/'
      ],
      insurance_fee: 0.00,
      cashierChannels: [
        {
          icon: 'icon-yue',
          text: '余额支付',
          value: '1'
        },
        {
          icon: 'icon-weixin',
          text: '微信支付',
          value: '2'
        }
      ],
      paytype: 1 // 2微信 1余额
    }
  },
  beforeMount: function () {
    this.carinfo = this.$store.state.order.carinfo
    // 计算车辆费用计算代驾费用
    if (this.$store.state.order.counttype === '4hour') {
      this.fee = this.carinfo.fourfee.fee
      this.driver_fee = this.carinfo.fourfee.driver_fee
      this.insurance_fee = this.$store.state.feetander.insurance_fee
    } else if (this.$store.state.order.counttype === '8hour') {
      this.fee = this.carinfo.eightfee.fee
      this.driver_fee = this.carinfo.eightfee.driver_fee
      this.insurance_fee = this.$store.state.feetander.insurance_fee
    } else {
      let _d = parseInt((this.$store.state.order.edate - this.$store.state.order.sdate) / 1000)
      let _day = _d / (24 * 60 * 60)

      this.fee = parseFloat(Math.ceil(_day) * this.carinfo.dayfee.fee)
      this.driver_fee = parseFloat(Math.ceil(_day) * this.carinfo.dayfee.driver_fee)
      this.insurance_fee = parseFloat(Math.ceil(_day) * this.$store.state.feetander.insurance_fee)
    }

    if (this.$store.state.order.gettype === 1) {
      this.sm_fee = 50.00
    }
    // 如果不需要代驾扣除代驾费用

    if (!this.$store.state.order.need_driver) {
      this.driver_fee = 0.00
    }

    this._countDate()
    this.$store.dispatch('getUser')
  },
  mounted: function () {
    this.phone = this.$store.state.wxuser.phone ? this.$store.state.wxuser.phone : ''
    this.lxname = this.$store.state.wxuser.real_name ? this.$store.state.wxuser.real_name : ''
  },
  computed: {
    total_fee: function () {
      let _f = parseFloat(this.driver_fee) +
        parseFloat(this.fee) +
        parseFloat(this.sm_fee)
      if (_f > this.$store.state.wxuser.balance) {
        this.paytype = 2
        this.cashierChannels = [
          {
            icon: 'icon-weixin',
            text: '微信支付',
            value: '2'
          }
        ]
      } else {
        this.paytype = 1
        this.cashierChannels = [
          {
            icon: 'icon-yue',
            text: '余额支付',
            value: '1'
          },
          {
            icon: 'icon-weixin',
            text: '微信支付',
            value: '2'
          }
        ]
      }
      return _f
    }
  },
  methods: {
    onCashierSelect: function (item) {
      console.log(item)
      this.paytype = item.value
      console.log(this.paytype)
    },
    onCashierPay: function () {
      this.pay()
    },
    _countDate: function () {
      let _d = parseInt((this.$store.state.order.edate - this.$store.state.order.sdate) / 1000)
      let _day = parseInt(_d / (24 * 60 * 60))
      let _hour = Math.ceil((_d % (24 * 60 * 60)) / (60 * 60))

      this.countDatestr = `${_day}天${_hour}小时`
    },
    pay: async function () {
      // 过滤
      if (this.phone.length !== 11) {
        Toast.failed('请填写正确的手机号码')
        this.isCashierhow = false
        return false
      }
      if (!this.lxname) {
        Toast.failed('联系人姓名不能为空')
        this.isCashierhow = false
        return false
      }

      const order = this.$store.state.order
      let _postdata = {
        s_date: order.sdate.getTime(),
        e_date: order.edate.getTime(),
        fee: this.total_fee,
        car_fee: this.fee,
        driver_fee: this.driver_fee,
        service_fee: 0,
        insurance_fee: 0,
        need_driver: order.need_driver,
        phone: this.phone,
        lxname: this.lxname,
        address: this.$store.state.order.address ? this.$store.state.order.address : '',
        cid: order.cid,
        uid: this.$store.state.wxuser.uid,
        despoil_fee: this.carinfo.despoil,
        send_fee: this.sm_fee,
        rid: this.$store.state.wxuser.relId ? this.$store.state.wxuser.relId : '',
        pay_type: this.paytype
      }
      if (order.counttype === 'day') {
        _postdata.type = 3
      } else if (order.counttype === '8hour') {
        _postdata.type = 2
      } else {
        _postdata.type = 1
      }

      let _r = await this.$api.post('/addOrder', _postdata)
      console.log(this.paytype);
      if (_r.data.state) {
        this.$refs.cashier.next('loading')
        Toast.succeed('添加成功')
        const _this = this

        if (this.paytype == 1) {
          this.$refs.cashier.next('success', {
            buttonText: '确定',
            handler: function () {
              _this.$router.push({ name: 'OrderList' })
            }
          })
        } else {
          let _payparams = await this.$api.post('/prepay', {
            oid: _r.data.data.oid,
            total_fee: parseFloat(this.total_fee * 100),
            // total_fee: 1,
            desc: this.$store.state.wxuser.nickname + '的' + this.$store.state.order.carinfo.name + '租车订单',
            openid: this.$store.state.wxuser.openid
          })

          if (_payparams.data.state) {
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest', _payparams.data.data,
              function (res) {
                if (res.err_msg === 'get_brand_wcpay_request:ok') {
                  // 使用以上方式判断前端返回,微信团队郑重提示：
                  // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                  _this.$refs.cashier.next('success', {
                    buttonText: '确定',
                    handler: function () {
                      _this.$router.push({ name: 'OrderList' })
                    }
                  })
                } else {
                  _this.$refs.cashier.next('fail', {
                    buttonText: '确定',
                    handler: function () {
                      _this.isCashierhow = false
                    }
                  })
                }
              })
          }
        }
      } else {
        this.$refs.cashier.next('fail', {
          text: _r.data.info,
          buttonText: '确定',
          handler: function () {
            this.isCashierhow = false
          }
        })
      }
    },
    choosePayType: function () {

    }
  }
}
</script>

<style scoped>
  .feedetail{
    /*background: rgb(244,243,248);*/
    padding:20px 40px;
    font-size: 14px;

  }

  .order{
    display: flex;
    flex-direction: column;
  }
  .orderpic{
    height: 150px;
    position: relative;
  }
  .backbtn{
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    top:25px;
    left:20px;
    font-size: 12px;
    background: rgba(0,0,0,.7);
    color:#fff
  }
  .carname{
    text-align: center;
    line-height: 40px;
  }
  .carLogo{
    text-align: center;
  }
  .carLogo >i {
    font-size: 20px;
    color:#666;
    line-height: 30px;
  }
  .info{
    margin-top: 15px;
    padding:0 20px
  }
  .infotitle{
    text-align: center;
    font-size: 12px;
    line-height: 2;
  }
  .infotitle:after{
    content: "";
    margin:0 auto;
    width: 30px;
    border-bottom:2px solid #ccc;
    display: block;
  }
  .arg{
    display: flex;
    height: 80px;
    margin-top: 15px;
  }
  .arg > div{
    width: 0;
    flex-grow: 1;
    text-align: center;
  }

  .argtitle{
    font-size: 12px;
    display: block;
    line-height: 2;
  }
  .arginfo{
    display: block;
    font-size: 18px;
  }
  .pricebox{
    padding:0 40px;
    margin:10px 0;
  }
  .priceitem{
    margin-bottom: 20px;
  }

  .l2{
    text-align: right;
    font-size: 12px;
    color:#999;
    text-decoration-line:line-through;

  }
  .l3{

    text-align: right;
    font-size: 12px;
    color:#666
  }

  .carinfo{
    padding:10px 40px;
    text-indent: 2em;
    font-size:12px;
    color:#666;
  }
  .checkout{
    height: 50px;
    background: -webkit-linear-gradient(top left,#6a78d0,#7986db);
    color:#fff;
    line-height: 50px;
    text-align: center;

  }
  .custom{
    text-align: center;
    line-height: 40px;
  }
  .lineAll > span:first-of-type{
    font-size: 16px;
  }
  .tot{
    font-size: 16px;
    color:#6a78d0;
    font-weight: 500;
  }
  .feedetail .lineItem{
    color:rgb(162,162,162);
    margin: 5px 0;
  }

  .lineItem span{
    font-size: 12px;
    display: block;
    transform: scale(.9);

  }
  .lineItem > .fr{
    text-align: right;
  }
  .lineItem > .fr  span{
    text-align: right;
  }

</style>
